<template>
  <div style="background: #f7f7f7">
    <!-- <van-nav-bar title="我的" @click-left="onClickLeft">
      <template #left>
        <van-icon color="#9b9c9d" name="home-o" size="22" />
      </template>
      <template #right>
        <van-icon color="#9b9c9d" name="wap-nav" size="22" />
      </template>
    </van-nav-bar> -->
    <!-- <img src="src/assets/mybg.jpg" alt=""> -->
    <!-- 头部背景 -->
    <div class="back_herard">
      <div class="con_1">
        <!-- <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""> -->
        <div class="con_picture">
          <router-link :to="{ name: 'BasicInfo' }">
            <img class="ttimg" :src="iconUrl + emailLogin[0].userImg" alt="" />
          </router-link>
          <div class="con_name">
            <p>{{ emailLogin[0].Nickname }}</p>
            <div class="accout">会员号：{{ emailLogin[0].Account }}</div>
          </div>
        </div>
        <div class="Settingsbox">
          <router-link :to="{ name: 'PersonalSettings' }"
            ><van-icon name="setting-o"
          /></router-link>
        </div>
        <div class="clear"></div>
      </div>
      <div class="con_2">
        <ul>
          <li>
            <router-link :to="{ name: 'WriteEvaluation' }">
              <p class="p1">13</p>
              <p class="p2">商品收藏</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'a' } }">
              <p class="p1">{{ $store.state.orderCount }}</p>
              <p class="p2">订单数量</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'BrowseHistory' }">
              <p class="p1">{{ $store.state.count.length }}</p>
              <p class="p2">浏览历史</p>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="mypart1">
      <ul>
        <li>
          <a href="#" @click.prevent="showList = true">
            <p class="p1">1</p>
            <p class="p2">优惠券</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p class="p1">￥{{ userPrice }}</p>
            <p class="p2">我的余额</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p class="p1">￥{{ orderPrice }}</p>
            <p class="p2">支付订单</p>
          </a>
        </li>
        <li class="lastli">
          <router-link :to="{ name: 'ConsumerDetails' }">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/xiaofeimx_icon.png"
            />
            <p class="p2">消费明细</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="mypart2">
      <div class="con">
        <div class="pa2_tit">
          <p>我的订单</p>
          <router-link :to="{ name: 'Myorder' }"
            >查看更多订单 &gt;
          </router-link>
        </div>
        <ul>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'b' } }">
              <van-badge
                class="bage"
                v-if="recList.length ? show == true : false"
                :content="recList.length"
              />
              <van-badge class="bage" v-else />

              <div class="ddimg">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/daifuk_icon.png"
                />
              </div>

              <p>待付款</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'e' } }">
              <van-badge
                class="bage"
                v-if="shipped.length ? show3 == true : false"
                :content="shipped.length"
              />
              <van-badge class="bage" v-else />
              <div class="ddimg">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/daifah_icon.png"
                />
              </div>
              <p>待发货</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'c' } }">
              <van-badge
                class="bage"
                v-if="Takedelivery.length ? show1 == true : false"
                :content="Takedelivery.length"
              />
              <van-badge class="bage" v-else />
              <div class="ddimg">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/peoisong_icon.png"
                />
              </div>
              <p>配送中</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'd' } }">
              <van-badge
                class="bage"
                v-if="Evaluated.length ? show2 == true : false"
                :content="Evaluated.length"
              />
              <van-badge class="bage" v-else />
              <div class="ddimg">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/daipingjia.png"
                />
              </div>
              <p>待评价</p>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'Myorder', params: { acid: 'g' } }">
              <div class="ddimg">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/mine_icon_tk.png"
                />
              </div>
              <p>退款/售后</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
    <div class="mypart2 pat2">
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div class="clear"></div>
    <div class="mypart3">
      <van-grid :column-num="4">
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my11.png"
          text="我的活动"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my12.png"
          text="社区"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my13.png"
          text="客服服务"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my14.png"
          text="京东超市"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my7.png"
          text="我的优惠券"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my8.png"
          text="收货地址"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my9.png"
          text="我的积分"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my10.png"
          text="客服咨询"
        />
      </van-grid>
    </div>
    <div class="clear"></div>
    <div class="mypart2">
      <div class="con">
        <div class="pa2_tit">
          <p>天猫超市卡</p>
          <a href="javascript:void()">立刻充值 &gt;</a>
        </div>
        <div class="pa2con">
          <img
            src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my00.jpg"
          />
          <p>账户余额：￥{{ userPrice }}.00</p>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="mypart4">
      <img
        src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my15.png"
      />
    </div>
    <guessLike></guessLike>
  </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
import { mapState } from "vuex";
import guessLike from "../Children/GuessLike.vue";

export default {
  components: { guessLike },
  name: "MyInfo",
  data() {
    return {
      show: true,
      show1: true,
      show2: true,
      show3: true,

      content: "",
      Evaluated: [],
      shipped: [],
      userPrice: "",
      orderPrice: "",
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
    };
  },
  created() {
    this.GetUserPirce();
    this.getReceived();
    this.getTakedelivery();
    this.TobeEvaluated();
    this.Tobeshipped();
  },
  mounted() {},
  activated() {
    this.GetUserPirce();
    this.getReceived();
    this.getTakedelivery();
    this.TobeEvaluated();
    this.Tobeshipped();
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    onClickLeft() {
      this.$router.push("/homepage");
    },
    async getReceived() {
      try {
        //待付款信息获取
        var dt = new Date();
        var mm = parseInt(dt.getMinutes());
        const { data: res } = await this.$http.get("getReceived", {
          params: { id: this.emailLogin[0].userID },
        });

        this.$store.commit("setRecList", res.data);
      } catch (error) {}
    },
    async getTakedelivery() {
      //待付款信息获取
      try {
        const { data: res } = await this.$http.get("getTakedelivery", {
          params: { id: this.emailLogin[0].userID },
        });
        console.log(res);

        this.$store.commit("setTakedelivery", res.data);
      } catch (error) {}
    },
    async TobeEvaluated() {
      try {
        const { data: res } = await this.$http.get("TobeEvaluated", {
          params: { id: this.emailLogin[0].userID },
        });
        this.Evaluated = res.data;
      } catch (error) {}
    },

    //待发货
    async Tobeshipped() {
      try {
        const { data: res } = await this.$http.get("ToBeShipped", {
          params: { id: this.emailLogin[0].userID },
        });
        this.shipped = res.data;
      } catch (error) {}
    },
    //获取用户金额
    async GetUserPirce() {
      try {
        const { data: res } = await this.$http.get("Obtainuserbalance", {
          params: { id: this.emailLogin[0].userID },
        });
        console.log(res);
        this.userPrice = res.data[0].Account_balance;
        this.orderPrice = res.data[0].price;
      } catch (error) {}
    },
  },
  computed: {
    ...mapState(["emailLogin", "recList", "Takedelivery"]),
  },
};
</script>
<style lang="less" scoped>
.back_herard {
  background: url(../../assets/icon/bginfo.png) repeat-y;
  width: 100%;
  background-size: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 1px 3px 8px 0px rgb(250, 107, 107);
  .con_1 {
    padding: 0.8rem;
    .con_picture {
      float: left;
      width: 80%;
      .ttimg {
        float: left;
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 60px;
        /* padding-right: 0.5rem; */
        /* padding-left: 0.5rem; */

        border: 1px solid #fff;
        margin-left: 10px;
        margin-right: 12px;
      }
      .con_name {
        float: left;
        p {
          color: #fff;
          font-size: 1.1rem;
          margin-top: 0.6rem;
        }
        .accout {
          color: #fff;
          font-size: 0.7rem;
        }
      }
    }
    .Settingsbox {
      float: right;
      width: 20%;
      a {
        display: block;
        color: #fff;
        text-align: right;
        font-size: 0.85rem;
        i {
          font-size: 16px;
        }
      }
    }
  }
  .con_2 {
    width: 80%;
    margin: 0 auto;
    padding: 0rem 0 2.5rem;
    ul {
      overflow: hidden;
      li {
        float: left;
        width: 33.3%;
        .p1 {
          text-align: center;
          color: #fff;
          font-size: 0.9rem;
          line-height: 1.5rem;
        }
        .p2 {
          text-align: center;
          color: #fff;
          font-size: 0.9rem;
        }
      }
    }
  }
}
.mypart1 {
  position: relative;
  margin-top: -2rem;
  padding: 0 1rem;
  ul {
    overflow: hidden;
    background: #fff;
    padding: 0.8rem;
    border-radius: 6px;
    li {
      float: left;
      width: 25%;
      text-align: center;
      .p1 {
        text-align: center;
        color: #000;
        font-size: 0.9rem;
        line-height: 1.5rem;
      }
      .p2 {
        text-align: center;
        color: #000;
        font-size: 0.9rem;
        line-height: 1.5rem;
      }
      img {
        height: 1.5rem;
      }
    }
    .lastli {
      border-left: 1px solid #eee;
      box-sizing: border-box;
    }
  }
}
.mypart2 {
  padding: 0 1rem;
  margin: 0.9375rem auto;
  .con {
    background: #fff;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    .pa2_tit {
      height: 2rem;
      line-height: 2rem;
      border-bottom: 1px solid #f7f7f7;
      p {
        float: left;
        font-size: 0.8rem;
        color: #000;
        font-weight: bold;
      }
      a {
        display: block;
        float: right;
        color: #666;
        font-size: 0.75rem;
      }
    }
    ul {
      overflow: hidden;
      padding-top: 0.3rem;
      li {
        float: left;
        width: 20%;
        text-align: center;
        padding: 0.5rem 0;
        .ddimg {
          width: 1.5rem;
          height: 1.5rem;
          margin: 0 auto;
          position: relative;
          img {
            width: 1.5rem;
            height: 1.5rem;
          }
        }
        p {
          text-align: center;
          line-height: 1.5rem;
          font-size: 0.75rem;
          color: #666;
        }
      }
    }
  }
}
.pat2 {
  margin: 0;
}
.mypart3 {
  padding: 0 1rem;
  margin: 0.9375rem auto;
}
.pa2con {
  img {
    width: 100%;
  }
  p {
    color: #000;
    line-height: 2rem;
    font-size: 0.8rem;
  }
}
.mypart4 {
  padding: 0 1rem;
  padding-bottom: 0.5rem;
  img {
    display: block;
    margin: 0 auto;
    height: 1.5rem;
  }
}
.likebox {
  background: #fff;
  border-top: 1px solid #eee;
}
.my {
  margin: 0 1rem;
  ul {
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 13px;
    li {
      float: left;
      width: 46%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      overflow: hidden;
      padding: 2px;
      margin: 6px;
      background: white;
      border-radius: 10px;
      a {
        display: block;
        padding: 0.5rem;
      }
      .proimg {
        width: 100%;
      }
      .tit {
        height: 2.5rem;
        font-size: 0.9rem;
        padding-top: 0.5rem;
        color: #333;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        color: #ff2150;
        padding-top: 0.5rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 1.2rem;
        img {
          float: right;
        }
        span {
          // padding-left: 1rem;
          color: #999;
          text-decoration: line-through;
          font-size: 0.8rem;
          height: 1rem;
          line-height: 1rem;
        }
      }
    }
  }
}
.like_box {
  ul {
    overflow: hidden;
    background: #f6f6f6;

    li {
      float: left;
      width: 46%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      padding: 2px;
      margin: 6px;
      background: white;
      border-radius: 10px;
      img:nth-child(1) {
        width: 100%;
        border-radius: 10px;
        height: 12.5rem;
      }
      .like_text {
        height: 2.5rem;
        font-size: 0.9rem;
        padding-top: 0.5rem;
        color: #1a1a1a;
        line-height: 1.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 3px;
      }
      .price {
        padding-top: 0.5rem;
        height: 1rem;
        line-height: 1rem;
        padding: 3px;
        .pice {
          color: #fa2c19;
          font-size: 1rem;
        }
        .tag {
          margin-left: 9px;
        }
        .pic {
          float: right;
          width: 12%;
        }
      }
      .pice:before {
        content: "￥";
      }
    }
  }
}
.like_title {
  padding: 0.5rem;
  height: 4.8rem;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding-right: 0.2rem;
  margin-bottom: 6px;
  img {
    height: 10rem;
    width: 16rem;
    /* vertical-align: middle; */
    margin-top: -51px;
    margin-left: -24px;
  }
  span {
    line-height: 1.8rem;
    height: 1.8rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    overflow: hidden;
    color: #333;
  }
}
</style>